<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1. 项目初始化 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/3.0076a912.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-项目初始化"><a href="#_1-项目初始化" class="header-anchor">#</a> 1. 项目初始化</h2> <blockquote><p>目标</p> <ul><li>能使用 Vue CLI 创建项目</li> <li>了解 Vant 组件库的导入方式</li> <li>掌握制作使用字体图标的方式</li> <li>掌握如何在 Vue 项目中处理 REM 适配</li> <li>理解 axios 请求模块的封装</li></ul></blockquote> <h3 id="_1-1-使用-vue-cli-创建项目"><a href="#_1-1-使用-vue-cli-创建项目" class="header-anchor">#</a> 1.1 使用 Vue CLI 创建项目</h3> <blockquote><p>如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">npm</span> <span class="token function">install</span> --global @vue/cli
</code></pre></div></blockquote> <ol><li>在命令行中输入以下命令创建 Vue 项目：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>vue create toutiao<span class="token operator">-</span>m
</code></pre></div><p>![](./images/Day_001/001 - create.png)</p> <ol start="2"><li>选择安装预设</li></ol> <ul><li>default：默认勾选 babel、eslint，回车之后直接进入装包</li> <li>manually：自定义勾选特性配置，选择完毕之后，才会进入装包</li> <li><strong>选择第 2 种：手动选择特性，支持更多自定义选项</strong></li></ul> <img src="/heima2020/assets/img/001 - Please pick a preset.947f420f.png"> <ol start="3"><li>安装项目中需要使用的库以及功能，分别选择以下几个模块</li></ol> <ul><li><p><code>Babel</code>：<code>es6</code> 转 <code>es5</code></p></li> <li><p><code>Router</code>：路由</p></li> <li><p><code>Vuex</code>：数据容器，存储共享数据</p></li> <li><p><code>CSS Pre-processors</code>：<code>CSS</code>预处理器，后面会提示你选择 <code>less</code>、<code>sass</code>、<code>stylus</code> 等</p></li> <li><p><code>Linter / Formatter</code>：代码格式校验</p> <img src="/heima2020/assets/img/002 - 安装项目中需要使用的库以及功能.97b42b05.png" style="zoom:90%;"></li></ul> <ol start="4"><li>配置路由模式</li></ol> <ul><li><p>是否使用 <code>history</code> 路由模式，这里输入 <code>n</code> 不使用</p> <img src="/heima2020/assets/img/003 - 配置路由模式.c5f881c2.png" style="zoom:80%;"></li></ul> <ol start="5"><li>选择 <code>CSS</code> 预处理器</li></ol> <ul><li><p>项目中选择 <code>Less</code></p> <img src="/heima2020/assets/img/004 - 选择 CSS 预处理器.9945458d.png" style="zoom:90%;"></li></ul> <ol start="6"><li>选择代码格式规范</li></ol> <ul><li><p>选择 <code>ESLint</code> + <a href="https://standardjs.com/" target="_blank" rel="noopener noreferrer">Standard config<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <img src="/heima2020/assets/img/005 - 选择代码格式规范.c7992b5c.png" style="zoom:90%;"></li></ul> <ol start="7"><li><p>选择在什么时机下触发代码格式校验</p> <ul><li>Lint on save：每当保存文件的时候</li> <li>Lint and fix on commit：每当执行 <code>git commit</code> 提交的时候</li> <li><strong>这里建议两个都选上，更严谨</strong></li></ul></li></ol> <img src="/heima2020/assets/img/006 - 选择在什么时机下触发代码格式校验.6031c8b7.png" style="zoom:90%;"> <ol start="8"><li>额外的配置文件的配置</li></ol> <ul><li><p><code>Babel</code>、<code>ESLint</code> 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里</p> <ul><li><code>In dedicated config files</code>：分别保存到单独的配置文件</li> <li><code>In package.json</code>：保存到 <code>package.json</code> 文件中</li></ul></li> <li><p>里建议选择第 <code>1</code> 个，保存到单独的配置文件，这样方便我们做自定义配置</p> <img src="/heima2020/assets/img/007 - 额外的配置文件的配置.b296c7b5.png" style="zoom:90%;"></li></ul> <ol start="9"><li>是否保存配置预设</li></ol> <ul><li><p>这里里是问你是否需要将刚才选择的一系列配置保存起来，然后它可以帮你记住上面的一系列选择，以便下次直接重用</p></li> <li><p>这里根据自己需要输入 <code>y</code> 或者 <code>n</code>，我这里输入 <code>n</code> 不需要</p> <img src="/heima2020/assets/img/008 - 是否保存配置预设.ac97f849.png" style="zoom:90%;"></li></ul> <ol start="10"><li>向导配置结束，开始装包，安装包的时间可能较长，请耐心等待......</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/Day_001/009 - 安装包.png<span class="token punctuation">&quot;</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token property">zoom</span><span class="token punctuation">:</span>86%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p>​</p> <ol start="11"><li><p>安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入</p> <p>![](./images/Day_001/010 - 包安装完成.png)</p></li> <li><p>进入你的项目目录，并启动项目</p> <p>![](./images/Day_001/011 - 启动并运行项目.png)</p></li> <li><p>项目运行成功</p> <ul><li><p>启动成功，命令行中输出项目的 http 访问地址</p></li> <li><p>打开浏览器，输入其中任何一个地址进行访问</p></li></ul> <p>![](./images/Day_001/012 - 运行项目.png)</p></li> <li><p>如果能看到该页面，恭喜你，项目创建成功了</p> <img src="/heima2020/assets/img/013 - 启动成功.6187ea47.png" style="zoom:67%;"></li></ol> <hr> <h3 id="_1-2-加入-git-版本管理"><a href="#_1-2-加入-git-版本管理" class="header-anchor">#</a> 1.2 加入 Git 版本管理</h3> <ol><li>加入 <code>git</code> 版本管理的好处：</li></ol> <ul><li>代码备份</li> <li>多人协作</li> <li>历史记录</li></ul> <ol start="2"><li>创建远程仓库</li></ol> <ul><li><a href="https://github.com/lipengzhou" target="_blank" rel="noopener noreferrer">GitHub<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://gitee.com/" target="_blank" rel="noopener noreferrer">码云<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://coding.net/" target="_blank" rel="noopener noreferrer">Coding<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <ol start="3"><li>使用码云或者 <code>Github</code> 自行创建一个线上仓库</li></ol> <img src="/heima2020/assets/img/014 - Create a new repository.e45dd32c.png" style="zoom:70%;"> <ol start="4"><li><p>将本地仓库推到线上</p> <ul><li><p>如果没有本地仓库</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 创建本地仓库</span>
git init

<span class="token comment">// 将文件添加到暂存区</span>
git add 文件

<span class="token comment">// 提交历史记录</span>
git commit <span class="token string">&quot;提交日志&quot;</span>

<span class="token comment">// 添加远端仓库地址</span>
git remote add origin 你的远程仓库地址

<span class="token comment">// 推送提交</span>
git push <span class="token operator">-</span>u origin master
</code></pre></div></li></ul></li></ol> <ul><li><p>如果已有本地仓库（Vue CLI 已经帮我们初始化好了）</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加远端仓库地址</span>
git remote add origin 你的远程仓库地址

<span class="token comment">// 推送提交</span>
git push <span class="token operator">-</span>u origin master
</code></pre></div></li></ul> <ul><li><p>如果之后项目代码有了变动需要提交：</p> <div class="language-js extra-class"><pre class="language-js"><code>git add <span class="token punctuation">.</span>

git commit xxx

git push
</code></pre></div></li></ul> <ol start="5"><li>其他分支命令</li></ol> <ul><li><p>验证远程仓库是否添加成功</p> <img src="/heima2020/assets/img/015 - remote.d0dda5be.png" style="zoom:76%;"></li> <li><p>git push 报错的提示含义</p> <img src="/heima2020/assets/img/016 - git 命令.66556eee.png" style="zoom:100%;"></li></ul> <hr> <h3 id="_1-3-调整初始目录结构"><a href="#_1-3-调整初始目录结构" class="header-anchor">#</a> 1.3 调整初始目录结构</h3> <ol><li>默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。这里主要就是下面的两个工作：</li></ol> <ul><li>删除初始化的默认文件</li> <li>新增调整我们需要的目录结构</li></ul> <ol start="2"><li>将 <code>App.vue</code> 修改为</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>黑马头条<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li>将 <code>router/index.js</code> 修改为</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">&quot;vue-router&quot;</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 配置路由表</span>
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router<span class="token punctuation">;</span>
</code></pre></div><ol start="4"><li>删除不需要的文件</li></ol> <ul><li><code>src/views/About.vue</code></li> <li><code>src/views/Home.vue</code></li> <li><code>src/components/HelloWorld.vue</code></li> <li><code>src/./images/Day_001/logo.png</code></li></ul> <ol start="5"><li>创建以下几个目录</li></ol> <ul><li><p><code>src/api</code> 目录</p> <ul><li>存储接口封装</li></ul></li> <li><p><code>src/utils</code> 目录</p> <ul><li>存储一些工具模块</li></ul></li> <li><p><code>src/styles</code> 目录</p> <ul><li><code>index.less</code> 文件，存储全局样式</li> <li>在 <code>main.js</code> 中加载全局样式</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 导入全局的样式文件</span>
<span class="token keyword">import</span> <span class="token string">&quot;./styles/index.less&quot;</span><span class="token punctuation">;</span>
</code></pre></div></li></ul> <ol start="6"><li>调整之后的目录结构如下</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>├── <span class="token constant">README</span><span class="token punctuation">.</span>md
├── babel<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js
├── <span class="token keyword">package</span><span class="token operator">-</span>lock<span class="token punctuation">.</span>json
├── <span class="token keyword">package</span><span class="token punctuation">.</span>json
├── <span class="token keyword">public</span>
│   ├── favicon<span class="token punctuation">.</span>ico
│   └── index<span class="token punctuation">.</span>html
└── src
    ├── api
    ├── App<span class="token punctuation">.</span>vue
    ├── assets
    ├── components
    ├── main<span class="token punctuation">.</span>js
    ├── router
    ├── utils
    ├── styles
    ├── store
    └── views
</code></pre></div><h3 id="_1-4-导入图标素材"><a href="#_1-4-导入图标素材" class="header-anchor">#</a> 1.4 导入图标素材</h3> <p>设计师为我们单独提供了设计稿中的图标，配置到项目中使用有两种方式：</p> <ul><li>一种方式是<a href="https://cn.vuejs.org/v2/cookbook/editable-svg-icons.html" target="_blank" rel="noopener noreferrer">将 SVG 图标 包装为 Vue 组件来使用<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。</li> <li>一种方式是将 SVG 制作为字体图标来使用</li></ul> <p>为了方便使用，我们在这里把它制作为字体图标。</p> <p>制作字体图标的工具有很多，在这里我们推荐大家使用：https://www.iconfont.cn/</p> <ol><li>注册账户</li></ol> <ul><li>直接选择第三方登录即可</li></ul> <img src="/heima2020/assets/img/image-20200325004756766.73ff9931.png" alt="image-20200325004756766" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325004912687.6cf8f387.png" alt="image-20200325004912687" style="zoom:50%;"> <ol start="2"><li>创建项目</li></ol> <img src="/heima2020/assets/img/image-20200325005117323.cf582efa.png" alt="image-20200325005117323" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325005648620.e45f7483.png" alt="image-20200325005648620" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325010034390.c288afee.png" alt="image-20200325010034390" style="zoom:50%;"> <ol start="3"><li>上传图标到项目</li></ol> <img src="/heima2020/assets/img/image-20200325010119980.8401c231.png" alt="image-20200325010119980" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325010201945.7c255b70.png" alt="image-20200325010201945" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325010254398.33809775.png" alt="image-20200325010254398" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325010413448.a1ad4135.png" alt="image-20200325010413448" style="zoom:50%;"> <img src="/heima2020/assets/img/image-20200325010439802.47504971.png" alt="image-20200325010439802" style="zoom:50%;"> <ol start="4"><li>生成链接</li></ol> <img src="/heima2020/assets/img/image-20200325010505302.76ae5a57.png" alt="image-20200325010505302" style="zoom:50%;"> <ol start="5"><li>在 <code>styles</code> 目录下新建 <code>icon.less</code> 文件</li></ol> <ul><li>生成在线地址后，在浏览器中打开，并复制代码</li> <li>在 <code>icon.less</code> 文件中进行粘贴</li></ul> <ol start="6"><li>在 <code>index.less</code> 文件中导入 <code>icon.less</code> 文件</li></ol> <ul><li>导入文件后后面加 <code>;</code></li></ul> <div class="language-less extra-class"><pre class="language-less"><code><span class="token comment">// 导入字体图标文件</span>
<span class="token variable">@import</span> <span class="token string">&quot;./icon.less&quot;</span><span class="token punctuation">;</span>
</code></pre></div><ol start="7"><li>在 <code>App.vue</code> 文件中测试</li></ol> <ul><li>其中 <code>toutiao</code> 是基准类名</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toutiao toutiao-pinglun<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><hr> <h3 id="_1-5-引入-vant-组件库"><a href="#_1-5-引入-vant-组件库" class="header-anchor">#</a> 1.5 引入 Vant 组件库</h3> <blockquote><p>Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库，它提供了非常丰富的移动端功能组件，简单易用</p></blockquote> <img src="/heima2020/assets/img/015 - vant.1dd30284.png" style="zoom:80%;"> <h4 id="_1-5-1-vant-组件库介绍"><a href="#_1-5-1-vant-组件库介绍" class="header-anchor">#</a> 1.5.1 Vant 组件库介绍</h4> <ul><li><a href="https://youzan.github.io/vant/#/zh-CN/" target="_blank" rel="noopener noreferrer">官方文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://youzan.github.io/vant/#/zh-CN/" target="_blank" rel="noopener noreferrer">优点与特性<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h4 id="_1-5-2-使用-vant的四个方式"><a href="#_1-5-2-使用-vant的四个方式" class="header-anchor">#</a> 1.5.2 使用 <code>Vant</code>的四个方式</h4> <ol><li>自动按需引入组件</li></ol> <ul><li>和方式二一样，都是按需引入，但是加载更方便一些（需要额外配置插件）</li> <li>优点：打包体积小</li> <li>缺点：每个组件在使用之前都需要手动加载注册</li></ul> <ol start="2"><li>手动按需引入组件</li></ol> <ul><li>在不使用插件的情况下，可以手动引入需要的组件</li> <li>优点：打包体积小</li> <li>缺点：每个组件在使用之前都需要手动加载注册</li></ul> <ol start="3"><li>导入所有组件</li></ol> <ul><li>Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法</li> <li>优点：导入一次，使用所有</li> <li>缺点：打包体积大</li></ul> <ol start="4"><li>通过 CDN 引入
<ul><li>使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量<code>vant</code>访问到所有组件。</li> <li>优点：适合一些演示、示例项目，一个 html 文件就可以跑起来</li> <li>缺点：不适合在模块化系统中使用</li></ul></li></ol> <h4 id="_1-5-3-项目中使用"><a href="#_1-5-3-项目中使用" class="header-anchor">#</a> 1.5.3 项目中使用</h4> <blockquote><p>前期开发的便利性我们选择方式三：导入所有组件，在最后做打包优化的时候根据需求配置按需加载以降低打包体积大小</p></blockquote> <ol><li>安装 <code>Vant</code></li></ol> <div class="language-js extra-class"><pre class="language-js"><code>cnpm i vant <span class="token operator">-</span><span class="token constant">S</span>
</code></pre></div><ol start="2"><li>在 <code>main.js</code> 中加载注册 Vant 组件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Vant <span class="token keyword">from</span> <span class="token string">&quot;vant&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">&quot;vant/lib/index.css&quot;</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vant<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>查阅文档使用组件</li></ol> <blockquote><p>Vant 的文档非常清晰，左侧是组件目录导航，中间是效果代码，右边是效果预览。</p></blockquote> <img src="/heima2020/assets/img/017 - 组件的使用.c596eb97.png" style="zoom:80%;"> <ol start="4"><li><p>在 <code>App.vue</code> 中使用 <code>Vant</code> 中的组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 按钮组件的使用 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>默认按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>主要按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>信息按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>警告按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>危险按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 单元格组件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>单元格<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>单元格<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>内容<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>描述信息<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell-group</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <ol start="5"><li>如果在页面中能够正常的看到下面的效果，则说明 Vant 导入成功了</li></ol> <p>![](./images/Day_001/018 - 组件的使用.png)</p> <hr> <h3 id="_1-6-移动端-rem-适配"><a href="#_1-6-移动端-rem-适配" class="header-anchor">#</a> 1.6 移动端 REM 适配</h3> <h4 id="_1-6-1-移动端-rem-适配介绍"><a href="#_1-6-1-移动端-rem-适配介绍" class="header-anchor">#</a> 1.6.1 移动端 REM 适配介绍</h4> <ol><li><code>Vant</code> 中的样式默认使用 <code>px</code> 作为单位，如果需要使用 <code>rem</code> 单位，推荐使用以下两个工具：</li></ol> <ul><li><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noopener noreferrer">lib-flexible<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 用于设置 <code>rem</code> 基准值，设置根字体的大小</li> <li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noopener noreferrer">postcss-pxtorem<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 是一款 <code>postcss</code> 插件，用于将单位转化为 <code>rem</code></li></ul> <h4 id="_1-6-2-使用-lib-flexible-动态设置-rem-基准值"><a href="#_1-6-2-使用-lib-flexible-动态设置-rem-基准值" class="header-anchor">#</a> 1.6.2 使用 <a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noopener noreferrer">lib-flexible<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 动态设置 REM 基准值</h4> <blockquote><p>html 标签的字体大小</p></blockquote> <ol><li><p>安装</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// yarn add amfe-flexible</span>

cnpm i amfe<span class="token operator">-</span>flexible <span class="token operator">-</span><span class="token constant">S</span>
</code></pre></div></li></ol> <ol start="2"><li>然后在 <code>main.js</code> 中加载执行该模块</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">&quot;amfe-flexible&quot;</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>最后测试：在浏览器中切换不同的手机设备尺寸，观察 <code>html</code> 标签 <code>font-size</code> 的变化</li></ol> <ul><li><p>例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px</p> <img src="/heima2020/assets/img/019 - lib-flexible.10b2c264.png" style="zoom:66%;"></li> <li><p>例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px</p> <img src="/heima2020/assets/img/020 - lib-flexible.337739c3.png" style="zoom:66%;"></li></ul> <h4 id="_1-6-3-使用-postcss-pxtorem-将-px-转为-rem"><a href="#_1-6-3-使用-postcss-pxtorem-将-px-转为-rem" class="header-anchor">#</a> 1.6.3 使用 <a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noopener noreferrer">postcss-pxtorem<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 将 <code>px</code> 转为 <code>rem</code></h4> <ol><li>安装</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// yarn add -D postcss-pxtorem</span>
<span class="token comment">// -D 是 --save-dev 的简写</span>

cnpm install postcss<span class="token operator">-</span>pxtorem <span class="token operator">-</span><span class="token constant">D</span>
</code></pre></div><ol start="2"><li>然后在<strong>项目根目录</strong>中创建 <code>.postcssrc.js</code> 文件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
    autoprefixer<span class="token operator">:</span> <span class="token punctuation">{</span>
      browsers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;Android &gt;= 4.0&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;iOS &gt;= 8&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">&quot;postcss-pxtorem&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      rootValue<span class="token operator">:</span> <span class="token number">37.5</span><span class="token punctuation">,</span>
      propList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>配置完毕，重新启动服务</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>npm run serve
</code></pre></div><ol start="4"><li>最后测试：<strong>刷新浏览器页面</strong>，审查元素的样式查看是否已将 <code>px</code> 转换为 <code>rem</code></li></ol> <ul><li><p>转换之前的样式</p> <img src="/heima2020/assets/img/021 - 配置之前的尺寸.4c0da389.png" style="zoom:60%;"></li> <li><p>转换之后的样式</p> <img src="/heima2020/assets/img/022- postcss.61b33948.png" style="zoom:60%;"></li></ul> <ol start="5"><li>注意事项：</li></ol> <ul><li>该插件<strong>不能转换行内样式中的 <code>px</code></strong>，例如 <code>&lt;div style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;</code></li></ul> <h3 id="_1-7-关于-postcssrc-js-配置文件"><a href="#_1-7-关于-postcssrc-js-配置文件" class="header-anchor">#</a> 1.7 关于 <code>.postcssrc.js</code> 配置文件</h3> <h4 id="_1-7-1-postcssrc-js-的配置"><a href="#_1-7-1-postcssrc-js-的配置" class="header-anchor">#</a> 1.7.1 <code>.postcssrc.js</code> 的配置</h4> <ol><li><code>.postcssrc.js</code> 是 PostCSS 的配置文件，具体配置如下</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
    autoprefixer<span class="token operator">:</span> <span class="token punctuation">{</span>
      browsers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;Android &gt;= 4.0&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;iOS &gt;= 8&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">&quot;postcss-pxtorem&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      rootValue<span class="token operator">:</span> <span class="token number">37.5</span><span class="token punctuation">,</span>
      propList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="_1-7-2-postcss-介绍"><a href="#_1-7-2-postcss-介绍" class="header-anchor">#</a> 1.7.2 <code>PostCSS</code> 介绍</h4> <ol><li><code>PostCSS</code> 介绍</li></ol> <ul><li><a href="https://postcss.org/" target="_blank" rel="noopener noreferrer">PostCSS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 是一个处理 <code>CSS</code> 的处理工具，本身功能比较单一，它主要负责解析 <code>CSS</code> 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如
<ul><li><a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">Autoprefixer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 插件可以实现自动添加浏览器相关的声明前缀</li> <li><a href="https://github.com/csstools/postcss-preset-env" target="_blank" rel="noopener noreferrer">PostCSS Preset Env<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 插件可以让你使用更新的 CSS 语法特性并实现向下兼容</li> <li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noopener noreferrer">postcss-pxtorem<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 可以实现将 px 转换为 rem</li></ul></li> <li>目前 <code>PostCSS</code> 已经有 <a href="https://github.com/postcss/postcss/blob/master/docs/plugins.md" target="_blank" rel="noopener noreferrer">200 多个功能各异的插件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。开发人员也可以根据项目的需要，开发出自己的 <code>PostCSS</code> 插件</li></ul> <ol start="2"><li><code>PostCSS</code> 一般不单独使用，而是与已有的构建工具进行集成</li></ol> <ul><li><p><a href="https://cli.vuejs.org/zh/guide/css.html#postcss" target="_blank" rel="noopener noreferrer">文档介绍<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p><a href="https://cli.vuejs.org/zh/guide/css.html#postcss" target="_blank" rel="noopener noreferrer">Vue CLI 默认集成了 PostCSS<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，并且默认开启了 <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">autoprefixer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 插件</p></li> <li><p><code>Vue CLI</code> 内部使用了 <code>PostCSS</code>，你可以通过 <code>.postcssrc</code> 或任何 <a href="https://github.com/michael-ciniawsky/postcss-load-config" target="_blank" rel="noopener noreferrer">postcss-load-config<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 支持的配置源来配置 <code>PostCSS</code>。也可以通过 <code>vue.config.js</code> 中的 <code>css.loaderOptions.postcss</code> 配置 <a href="https://github.com/postcss/postcss-loader" target="_blank" rel="noopener noreferrer">postcss-loader<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></li> <li><p>我们默认开启了 <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">autoprefixer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>。如果要配置目标浏览器，可使用 <code>package.json</code> 的 <a href="https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist" target="_blank" rel="noopener noreferrer">browserslist<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 字段</p></li></ul> <h4 id="_1-7-3-autoprefixer-插件的配置"><a href="#_1-7-3-autoprefixer-插件的配置" class="header-anchor">#</a> 1.7.3 Autoprefixer 插件的配置</h4> <ol><li><a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">autoprefixer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 是一个自动添加浏览器前缀的 PostCss 插件，<code>browsers</code> 用来配置兼容的浏览器版本信息</li></ol> <img src="/heima2020/assets/img/023 - autoprefixer.13c2155e.png" style="zoom:80%;"> <ol start="2"><li><strong>但是写在这里的话会引起编译器警告</strong></li></ol> <ul><li>警告意思就是说你应该将 <code>browsers</code> 选项写到 <code>package.json</code> 或 <code>.browserlistrc</code> 文件中</li> <li>在 <code>Vue-cli</code> 中已经默认开启了 <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">autoprefixer<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，所以把这两行代码注释</li> <li>注释后重启服务就可以解决掉警告信息</li></ul> <img src="/heima2020/assets/img/024 - autoprefixer 警告.144fbac5.png" style="zoom:80%;"> <h4 id="_1-7-4-postcss-pxtorem-插件的配置"><a href="#_1-7-4-postcss-pxtorem-插件的配置" class="header-anchor">#</a> 1.7.4 postcss-pxtorem 插件的配置</h4> <ol><li>postcss-pxtorem 插件的配置</li></ol> <ul><li><p><code>rootValue</code>：表示根元素字体大小，它会根据根元素大小进行单位转换</p></li> <li><p><code>propList</code> 用来设定可以从 px 转为 rem 的属性</p> <ul><li>例如 <code>*</code> 就是所有属性都要转换，<code>width</code> 就是仅转换 <code>width</code> 属性</li></ul> <img src="/heima2020/assets/img/025 - postcss-pxtorem.495d0d14.png" style="zoom:80%;"></li></ul> <ol start="2"><li><code>rootValue</code> 应该如何设置呢</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>如果你使用的是基于 lib<span class="token operator">-</span>flexable 的 <span class="token constant">REM</span> 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 <span class="token number">750</span> 宽，则应该设置为 <span class="token number">75</span>。
</code></pre></div><p>大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。</p> <p>但是 Vant 建议设置为 37.5，为什么呢？</p> <div class="language-js extra-class"><pre class="language-js"><code>因为 Vant 是基于 <span class="token number">375</span> 写的，所以如果你设置为 <span class="token number">75</span> 的话，Vant 的样式就小了一半。
</code></pre></div><p>所以如果设置为 <code>37.5</code> 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除 2 才能使用，否则就会变得很大。</p> <p>这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？</p> <ul><li>如果是 <code>Vant</code> 的样式，就把 <code>rootValue</code> 设置为 37.5 来转换</li> <li>如果是我们的样式，就按照 75 的 <code>rootValue</code> 来转换</li></ul> <ol start="3"><li>通过<a href="https://github.com/cuth/postcss-pxtorem#options" target="_blank" rel="noopener noreferrer">查阅文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>我们可以看到 <code>rootValue</code> 支持两种参数类型</li></ol> <ul><li>数字：固定值</li> <li>函数：动态计算返回
<ul><li>postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数</li> <li>它会把被处理的 CSS 文件相关的信息通过参数传递给该函数</li></ul></li> <li>修改配置如下</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * PostCSS 配置文件
 */</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 配置要使用的 PostCSS 插件</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 配置使用 autoprefixer 插件</span>
    <span class="token comment">// 作用：生成浏览器 CSS 样式规则前缀</span>
    <span class="token comment">// VueCLI 内部已经配置了 autoprefixer 插件</span>
    <span class="token comment">// 所以又配置了一次，所以产生冲突了</span>
    <span class="token comment">// 'autoprefixer': { // autoprefixer 插件的配置</span>
    <span class="token comment">//   // 配置要兼容到的环境信息</span>
    <span class="token comment">//   browsers: ['Android &gt;= 4.0', 'iOS &gt;= 8']</span>
    <span class="token comment">// },</span>

    <span class="token comment">// 配置使用 postcss-pxtorem 插件</span>
    <span class="token comment">// 作用：把 px 转为 rem</span>
    <span class="token string">&quot;postcss-pxtorem&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token function">rootValue</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> file <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> file<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;vant&quot;</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">?</span> <span class="token number">37.5</span> <span class="token operator">:</span> <span class="token number">75</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      propList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ol start="4"><li>其他</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span>Android<span class="token punctuation">]</span> <span class="token operator">&gt;=</span> <span class="token punctuation">(</span><span class="token number">4.0</span><span class="token punctuation">)</span><span class="token punctuation">[</span>iOS<span class="token punctuation">]</span> <span class="token operator">&gt;=</span> <span class="token number">8</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>具体语法请<a href="https://github.com/browserslist/browserslist" target="_blank" rel="noopener noreferrer">参考这里<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <ol start="5"><li>配置完毕，把服务重启一下，最后测试，very good</li></ol> <h3 id="_1-8-封装请求模块"><a href="#_1-8-封装请求模块" class="header-anchor">#</a> 1.8 封装请求模块</h3> <blockquote><p>和之前项目一样，这里我们还是使用 <a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">axios<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 作为我们项目中的请求库，为了方便使用，我们把它封装为一个请求模块，在需要的时候直接加载即可</p></blockquote> <ol><li>安装 axios</li></ol> <div class="language-js extra-class"><pre class="language-js"><code>cnpm i axios <span class="token operator">-</span><span class="token constant">S</span>
</code></pre></div><ol start="2"><li>创建 <code>src/utils/request.js</code></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * 封装 axios 请求模块
 */</span>
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&quot;axios&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> request <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  baseURL<span class="token operator">:</span> <span class="token string">&quot;http://ttapi.research.itcast.cn/&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 基础路径</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> request<span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>如何使用</li></ol> <ul><li>方式一（简单方便，但是不利于接口维护）：我们可以把请求对象挂载到 <code>Vue.prototype</code> 原型对象中，然后在组件中通过 <code>this.xxx</code> 直接访问</li> <li>方式二（推荐）：我们把每一个请求都封装成每个独立的功能函数，在需要的时候加载调用，这种做法更便于接口的管理和维护</li></ul> <p>在我们的项目中<strong>更推荐建议使用方式二</strong>，（在随后的业务功能中我们就能学到）</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/3.0076a912.js" defer></script>
  </body>
</html>
